<template>
  <div class="login-container">
    <bk-animation></bk-animation>
    <div class="login-box">
      <div class="left">
        <div></div>
      </div>
      <div class="right">
        <h1 class="title">欢迎登录</h1>
        <el-form :model="loginForm" :rules="rules" ref="loginFormRef">
          <el-form-item prop="username">
            <div class="input-icon-wrapper">
              <el-icon class="input-icon">
                <User />
              </el-icon>
              <el-input v-model="loginForm.username" placeholder="请输入用户名" size="large" class="auth-input" />
            </div>
          </el-form-item>

          <el-form-item prop="password">
            <div class="input-icon-wrapper">
              <el-icon class="input-icon">
                <Lock />
              </el-icon>
              <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" size="large" show-password
                class="auth-input" @keyup.enter="handleLogin" />
            </div>
          </el-form-item>
          <div class="settings">
            <router-link to="/forgot" class="link">忘记密码</router-link>
            <router-link to="/register" class="link">我要注册</router-link>
          </div>
          <el-button type="primary" size="large" class="login-btn" :loading="loading" @click="handleLogin">
            立即登录
          </el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import bkAnimation from '../components/bkAnimation.vue'
import network from '../api/index'
import { useRouter } from 'vue-router'
import { useStore } from '../store/index'

const store = useStore()
const router = useRouter()
const loginFormRef = ref(null)
const { communityApi,userApi,request } = network
const loginForm = reactive({
  username: '',
  password: ''
})
const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 5, message: '密码长度不能小于5位', trigger: 'blur' }
  ]
})
const loading = ref(false)

const handleLogin = async () => {
  if (!loginFormRef.value) return

  try {
    await loginFormRef.value.validate()
    loading.value = true
    const res = await request(userApi.login, loginForm, 'post')
    store.setToken(res.data.token)
    store.setUser(...res.data.user)
    ElMessage.success('登录成功')
    router.push('/')
  } catch (error) {
    ElMessage.error(error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
// 主题颜色
$primary-color: #66a6ff;
$primary-gradient: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
$text-color: #2c3e50;
$text-secondary: #606266;
$border-color: #e5e7eb;
$background-color: white;
$shadow-color: rgba(0, 0, 0, 0.1);

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

  .login-box {
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 800px;
    height: 300px;
    padding: 100px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    background-color: white;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: $primary-gradient;
    }

    .left {
      height: 300px;
      width: 400px;
      background-image: url(../assets/img/logo/bk1.jpg);
      background-size: contain;
      background-repeat: no-repeat;
    }

    .right {
      width: 300px;
      height: 300px;

      .title {
        text-align: center;
        margin-bottom: 30px;
        color: $text-color;
        font-size: 24px;
        font-weight: 600;
      }

      .settings {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: $text-color;
        font-size: 14px;
        width: 100%;
        margin-bottom: 5px;

        .link {
          color: $primary-color;
          text-decoration: none;
          cursor: pointer;
          font-weight: 500;

          &:hover {
            text-decoration: underline;
          }
        }
      }

      .login-btn {
        width: 100%;
        height: 50px;
        margin-top: 20px;
        letter-spacing: 2px;
        border: none;
        background-image: $primary-gradient;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 500;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(102, 166, 255, 0.3);
        }

        &:active {
          transform: translateY(0);
        }
      }

      // 新增的输入框样式
      .input-icon-wrapper {
        position: relative;
        width: 100%;

        .input-icon {
          position: absolute;
          left: 15px;
          top: 50%;
          transform: translateY(-50%);
          color: $primary-color;
          z-index: 2;
          font-size: 18px;
        }

        .auth-input {
          width: 100%;

          :deep(.el-input__wrapper) {
            padding-left: 40px;
            border-radius: 12px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            height: 50px;

            &:hover {
              box-shadow: 0 4px 12px rgba(102, 166, 255, 0.2);
            }

            &.is-focus {
              box-shadow: 0 0 0 2px rgba(102, 166, 255, 0.2);
            }
          }
        }
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 992px) {
  .login-container {
    .login-box {
      width: 90%;
      max-width: 700px;
      padding: 60px;
    }
  }
}

@media (max-width: 768px) {
  .login-container {
    height: 90vh;

    .login-box {
      flex: 1;
      flex-direction: column;
      height: auto;
      padding: 40px;

      .left {
        display: none;
      }

      .right {
        width: 100%;
        height: auto;

        .title {
          font-size: 20px;
          margin-bottom: 20px;
        }

        .settings {
          font-size: 12px;
        }

        .login-btn {
          margin-top: 15px;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .login-container {
    padding: 10px;

    .login-box {
      padding: 20px;

      .right {
        .title {
          font-size: 18px;
          margin-bottom: 15px;
        }

        .settings {
          font-size: 10px;
        }

        .login-btn {
          margin-top: 10px;
          height: 46px;
        }
      }
    }
  }
}
</style>